script.aculo.us কি?
script.aculo.us একটি জনপ্রিয় JavaScript লাইব্রেরি যা ওয়েব পৃষ্ঠাগুলিতে এনিমেশন এবং ড্র্যাগ-এন্ড-ড্রপ কার্যকারিতা যোগ করার জন্য ব্যবহৃত হয়। এটি মূলত Prototype.js লাইব্রেরির উপর ভিত্তি করে তৈরি হয়েছিল এবং এর উদ্দেশ্য ছিল ওয়েব ডেভেলপারদের জন্য আরও শক্তিশালী এবং সহজে ব্যবহৃত UI ফিচার এবং এনিমেশন সরবরাহ করা।
script.aculo.us এর মধ্যে কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য রয়েছে:
- এনিমেশন (Animation): ওয়েব উপাদানগুলির মধ্যে বিভিন্ন ধরনের এনিমেশন প্রক্রিয়া (যেমন ফেড ইন, ফেড আউট, স্লাইড) যোগ করা।
- ড্র্যাগ-এন্ড-ড্রপ (Drag-and-Drop): ইউজারদেরকে উপাদানগুলো পৃষ্ঠা থেকে টেনে নিয়ে যেতে সক্ষম করার সুবিধা।
- UI কন্ট্রোলস: উইন্ডো, ট্যাব, ডায়ালগ বক্স ইত্যাদির মতো UI উপাদানগুলির জন্য বিভিন্ন কন্ট্রোল যোগ করা।
HTML ফাইলে script.aculo.us যোগ করা
script.aculo.us লাইব্রেরি ব্যবহার করতে হলে আপনাকে প্রথমে এটি আপনার HTML ফাইলে যোগ করতে হবে। সাধারণত, CDN (Content Delivery Network) বা লোকালি ফাইল ব্যবহার করে এটি যোগ করা যেতে পারে। নিচে দুটি পদ্ধতি দেওয়া হলো।
১. CDN এর মাধ্যমে script.aculo.us ইনক্লুড করা
CDN ব্যবহারের মাধ্যমে আপনি সরাসরি লাইব্রেরিটি ইন্টারনেট থেকে লোড করতে পারেন, যা আপনার প্রোজেক্টে দ্রুত এবং সহজে লাইব্রেরি যুক্ত করতে সাহায্য করবে।
HTML ফাইলে CDN ব্যবহার:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>script.aculo.us Example</title>
<!-- Prototype.js এবং script.aculo.us CDN যোগ করা -->
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
</head>
<body>
<h1>script.aculo.us Example</h1>
<div id="myBox" style="width: 200px; height: 200px; background-color: lightblue;">
Drag me!
</div>
<script>
// ড্র্যাগ-এন্ড-ড্রপ উদাহরণ
new Draggable('myBox');
</script>
</body>
</html>
এখানে:
- Prototype.js প্রথমে যোগ করা হয়েছে কারণ script.aculo.us এর উপর নির্ভরশীল।
- পরে scriptaculous.js যোগ করা হয়েছে যা script.aculo.us লাইব্রেরি হিসেবে কাজ করবে।
এই উদাহরণে, একটি ডিভ এলিমেন্ট #myBox ড্র্যাগ করার জন্য প্রস্তুত করা হয়েছে, এবং এটি Draggable ক্লাস ব্যবহার করে ড্র্যাগ-এন্ড-ড্রপ সক্ষম করা হয়েছে।
২. লোকালি script.aculo.us ফাইল ব্যবহার করা
যদি আপনি CDN ব্যবহার না করতে চান, তবে আপনি script.aculo.us এবং prototype.js এর লোকাল ফাইল ডাউনলোড করে আপনার প্রোজেক্ট ফোল্ডারে রাখতে পারেন।
লোকালি ফাইল ব্যবহার:
- প্রথমে script.aculo.us এবং prototype.js ফাইলগুলো ডাউনলোড করুন।
- তারপর, আপনার HTML ফাইলে সেগুলো যোগ করুন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>script.aculo.us Example</title>
<!-- Prototype.js এবং script.aculo.us লোকালি যোগ করা -->
<script src="js/prototype.js"></script>
<script src="js/scriptaculous.js"></script>
</head>
<body>
<h1>script.aculo.us Example</h1>
<div id="myBox" style="width: 200px; height: 200px; background-color: lightblue;">
Drag me!
</div>
<script>
// ড্র্যাগ-এন্ড-ড্রপ উদাহরণ
new Draggable('myBox');
</script>
</body>
</html>
এখানে:
- prototype.js এবং scriptaculous.js ফাইলগুলো
js/ফোল্ডারে রাখা হয়েছে। - HTML ফাইলে সঠিক পাথে ফাইলগুলোর রেফারেন্স দেওয়া হয়েছে।
৩. Script.aculo.us এর সাধারণ ব্যবহার
এনিমেশন এবং ইন্টারঅ্যাকশন:
এটি HTML উপাদানগুলির জন্য নানা ধরনের এনিমেশন এবং ইন্টারঅ্যাকশন যোগ করতে ব্যবহৃত হয়।
উদাহরণ: ফেড ইন/আউট:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>script.aculo.us Fade Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
</head>
<body>
<button onclick="fadeEffect()">Click me to fade out!</button>
<div id="fadeBox" style="width: 200px; height: 200px; background-color: lightgreen;">
This is a box
</div>
<script>
function fadeEffect() {
new Effect.Fade('fadeBox', { duration: 2 });
}
</script>
</body>
</html>
এখানে, Effect.Fade ব্যবহার করা হয়েছে, যা একটি উপাদানকে ধীরে ধীরে ফেড আউট করে দেয়।
সারাংশ
script.aculo.us একটি শক্তিশালী JavaScript লাইব্রেরি যা ওয়েব পৃষ্ঠায় সহজেই এনিমেশন এবং ইন্টারঅ্যাকশন যোগ করতে সক্ষম করে। আপনি এই লাইব্রেরিটিকে CDN বা লোকালি ফাইল ব্যবহার করে আপনার প্রোজেক্টে যোগ করতে পারেন। এতে সহজেই ড্র্যাগ-এন্ড-ড্রপ, এনিমেশন এবং অন্যান্য ইন্টারঅ্যাকটিভ ফিচার যুক্ত করা যায়, যা আপনার ওয়েব অ্যাপ্লিকেশন বা পৃষ্ঠার ব্যবহারকারী অভিজ্ঞতাকে আরও উন্নত করতে সহায়তা করে।
Read more
